<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>我的收藏</template>
            <template v-slot:right></template>
        </nav-bar>

        <div class="addpage">
            <van-card v-for="(item,index) in goods"  :key="index"
            :price="item.goods.price+'.00'"
            :desc="item.goods.description"
            :title="item.goods.title"
            :thumb="item.goods.cover_url"
            
            >
            <template #footer>
                <van-button size="mini"  @click="goTo(item.goods_id)">商品详情</van-button>
                <van-button size="mini"  @click="tosc(item.goods_id)">取消收藏</van-button>
            </template>
            
            </van-card>
            
        </div>
       
       
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { reactive,toRefs,onMounted } from 'vue';
import { sclist , addsc} from 'network/collects';
import { Toast } from 'vant';
import {useRouter} from 'vue-router';

export default {
    name:"Addcp",
    components:{
        NavBar
    },

    

    setup() {
        const router = useRouter();
        const Listres = reactive({
            goods:[],
        });

        

        const init = ()=>{
            sclist().then(res=>{
            // console.log(res.data);
            Listres.goods = res.data;
            })
        }

        onMounted(()=>{
            init();
        })

        const tosc =(id)=>{
            let goods = id;
            addsc(goods).then(res=>{
                console.log(res.status);
                if(res.status == '201'){
                init();
                }else if(res.status == '204'){
                Toast.fail('取消收藏')
                init();
                }
                
            })
        }

        const goTo =(id) => {
            router.push({path:'/detail',query:{id:id}})
        }

       return{
           ...toRefs(Listres),
           tosc,
           goTo
       }
    },
}
</script>

<style scoped lang="scss">
.addpage{
    
    margin-top: 45px;
    text-align: left;
    margin-bottom: 50px;
}
.van-card__content{
    padding: 20px !important;
    font-size: 16px;
}

</style>

